Complete design tokens, add AppShell primary nav, and Button/Card primitives (#1313, #1314, #1315, #1316) - #1459
Open
katefominmoore23 wants to merge 1 commit into
Conversation
…mitives (solutions-plug#1313, solutions-plug#1314, solutions-plug#1315, solutions-plug#1316) solutions-plug#1313: styles/tokens.css already exists in full (117 lines, dark+light palettes) — nothing was deleted, so there was nothing to "recreate". The real gap: three CSS custom properties were referenced elsewhere in the app only via `var(--x, <hardcoded fallback>)` (--danger in PlaceBetForm.css, --border-color in OutcomeList.css, --shadow-lg in two account/newsletter pages), bypassing the centralized token system entirely — meaning dark-mode toggling (solutions-plug#22-23) and contrast-check tooling (solutions-plug#21) had nothing to hook into for them. Added --danger and --border-color as aliases of their equivalent existing tokens (--destructive, --border), and a real --shadow-lg value, plus the shared `@keyframes spin` used by the new Button below (previously only defined in admin.css/LoadingSpinner.css, neither of which layout.tsx loads globally). solutions-plug#1314: layout.tsx already wraps the entire app today, not just the landing page — but there genuinely was no primary navigation anywhere outside the admin section's own local sub-nav. Added AppShell.tsx (header + primary nav across Markets/Statistics/Create Market, plus a conditional Admin link once an admin session exists, + a minimal footer) and wired it into layout.tsx. It intentionally does not render on `/` or `/admin/*`, since LandingPage.tsx already owns a full marketing header/nav/footer and admin/layout.tsx already owns its own sub-navigation — avoiding a duplicate header in both places. solutions-plug#1315: added components/ui/Button.tsx — consistent variant/loading/ disabled handling, generalizing the existing admin-only Button in components/admin/Form.tsx (the closest prior art) for use outside the admin section (bet placement, market creation, resolution). solutions-plug#1316: added components/ui/Card.tsx (Card, CardHeader, CardTitle, CardBody, CardFooter) — a single shared container primitive for market list items (solutions-plug#57), statistics tiles (solutions-plug#49), and admin panels (solutions-plug#89-97) to converge on instead of each reinventing padding/border/shadow rules. No existing consumers were migrated to Button/Card — out of scope for this PR, which builds the primitives the issues asked for. Closes solutions-plug#1313 Closes solutions-plug#1314 Closes solutions-plug#1315 Closes solutions-plug#1316 Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_014jDDop7frnew1xcCJDSKEw
|
@katefominmoore23 Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits. You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
styles/tokens.cssalready exists in full (117 lines, dark+light palettes) — nothing was deleted, so there was nothing to "recreate". The real gap: three CSS custom properties were referenced elsewhere in the app only viavar(--x, <hardcoded fallback>)(--dangerinPlaceBetForm.css,--border-colorinOutcomeList.css,--shadow-lgin two account/newsletter pages), bypassing the centralized token system entirely — meaning dark-mode toggling (Event-Driven Frontend Indexing Support #22-23) and contrast-check tooling (Referral System & Affiliate Incentives #21) had nothing to hook into for them. Added--danger/--border-coloras aliases of their equivalent existing tokens, a real--shadow-lgvalue, and the shared@keyframes spinused by the new Button below.layout.tsxalready wraps the entire app today, not just the landing page — but there genuinely was no primary navigation anywhere outside the admin section's own local sub-nav. AddedAppShell.tsx(header + primary nav across Markets/Statistics/Create Market, plus a conditional Admin link once an admin session exists, + a minimal footer) and wired it intolayout.tsx. It intentionally skips/and/admin/*, sinceLandingPage.tsxandadmin/layout.tsxalready each own their own full header/nav — avoiding a duplicate header in both places.components/ui/Button.tsx— consistent variant/loading/disabled handling, generalizing the existing admin-only Button incomponents/admin/Form.tsxfor use outside the admin section (bet placement, market creation, resolution).components/ui/Card.tsx(Card,CardHeader,CardTitle,CardBody,CardFooter) — a single shared container primitive for market list items (Email Service Integration #57), statistics tiles (Analytics Event Tracking API #49), and admin panels (Create Component Library Documentation with Storybook #89-97) to converge on.No existing consumers were migrated to Button/Card — out of scope for this PR, which builds the primitives the issues asked for.
Test plan
var(--x)usage across the frontend againsttokens.css's defined custom properties to find the real [Design System] Recreate design tokens stylesheet #1313 gapapp/page.tsx,app/markets/page.tsx,app/statistics/page.tsx, andapp/admin/layout.tsxto confirm the real [Design System] Build app shell layout (header, nav, footer) #1314 gap and avoid duplicating existing chromeCloses #1313
Closes #1314
Closes #1315
Closes #1316